<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="50%"
      append-to-body
      custom-class="import-dialog"
      @close="close"
    >
      <div class="form-box">
        <!-- <div class="tabs">
          <div
            class="tabs-item"
            v-for="(item, index) in tabList"
            :key="index"
            :class="{ active: currentTab == index }"
            @click="changeTabs(item)"
          >
            {{ item.label }}
          </div>
        </div> -->
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="120px"
          class="add-form"
          label-position="top"
          :disabled="isDetail"
        >
          <div class="section">
            <div class="label">
              <label>房屋信息</label>
            </div>
            <el-form-item label="房间" prop="houseId">
              <span slot="label">
                房间
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-s-home"
                  @click="dialogSelectHouseVisible = true"
                  >选择房屋</el-button
                >
              </span>
              <el-input
                v-model="customHouseName"
                placeholder="请选择房屋"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="合同模板" prop="templateId">
              <el-select
                v-model="form.templateId"
                placeholder="请选择"
                filterable
              >
                <el-option
                  v-for="item in contractList"
                  :key="item.templateId"
                  :label="item.templateName"
                  :value="item.templateId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="section">
            <div class="label">
              <label>租客信息</label>
            </div>
            <el-form-item label="身份" prop="tenantType">
              <el-radio-group v-model="form.tenantType">
                <el-radio
                  :label="item.value + ''"
                  v-for="(item, index) in dict.type.dict_tenant_type"
                  :key="index"
                  >{{ item.label }}</el-radio
                >
                <!-- <el-radio :label="0">企业</el-radio> -->
              </el-radio-group>
            </el-form-item>
            <div v-if="form.tenantType == 2">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="企业名称" prop="enterpriseName">
                    <el-input
                      placeholder="请输入"
                      v-model="form.enterpriseName"
                      style="width: 80%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="法人代表" prop="legalPerson">
                    <el-input
                      placeholder="请输入"
                      v-model="form.legalPerson"
                      style="width: 80%"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item
                    label="统一社会信用代码"
                    prop="socialCreditNumber"
                  >
                    <el-input
                      placeholder="请输入"
                      v-model="form.socialCreditNumber"
                      style="width: 80%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item
                    label="证件信息（统一社会信用代码）"
                    prop="socialCreditNumberImg"
                  >
                    <image-upload
                      v-model="form.socialCreditNumberImg"
                      :limit="1"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item
                    label="委托人姓名"
                    prop="tenantName"
                    :rules="[
                      {
                        required: true,
                        message: '请输入委托人姓名',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-input
                      placeholder="请输入"
                      v-model="form.tenantName"
                      style="width: 80%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电话" prop="tenantMobile">
                    <el-input
                      v-input.num
                      placeholder="请输入"
                      v-model="form.tenantMobile"
                      style="width: 80%"
                      maxlength="11"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div v-if="form.tenantType == 1">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item
                    label="承租人姓名"
                    prop="tenantName"
                    :rules="[
                      {
                        required: true,
                        message: '请输入承租人姓名',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-input
                      placeholder="请输入"
                      v-model="form.tenantName"
                      style="width: 80%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电话" prop="tenantMobile">
                    <el-input
                      v-input.num
                      placeholder="请输入"
                      v-model="form.tenantMobile"
                      style="width: 80%"
                      maxlength="11"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="form.sex">
                    <el-radio :label="0">男</el-radio>
                    <el-radio :label="1">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号" prop="cardNumber">
                  <el-input
                    placeholder="请输入"
                    v-model="form.cardNumber"
                    style="width: 80%"
                    maxlength="18"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="section">
            <div class="label">
              <label>租期信息</label>
            </div>
            <el-form-item label="合同类型" prop="contractType">
              <el-select v-model="form.contractType" placeholder="请选择">
                <el-option
                  v-for="item in dict.type.dict_contract_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="租期起止日期" prop="leaseStartTime">
              <el-col :span="8">
                <el-form-item prop="leaseStartTime">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="form.leaseStartTime"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2" style="text-align: center"
                >至</el-col
              >
              <el-col :span="8">
                <el-form-item prop="leaseEndTime">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="form.leaseEndTime"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="付款方式" prop="paymentType">
              <el-select
                v-model="form.paymentType"
                placeholder="请选择"
                style="margin-right: 10px"
              >
                <el-option
                  v-for="item in dict.type.dict_payment_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-checkbox
                v-model="areaCalculateState"
                @change="changeAreaCalculateState"
                >按面积计算租金</el-checkbox
              >
            </el-form-item>

            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="押付方式" prop="payTypeId">
                  <el-select v-model="form.payTypeId" placeholder="请选择">
                    <el-option
                      v-for="item in payTypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="10" v-if="form.paymentType == 2">
              <el-col :span="12">
                <el-form-item label="总租金" prop="monthPrice">
                  <el-input
                    placeholder="请输入"
                    v-model="form.monthPrice"
                    style="width: 80%"
                    v-input.float="2"
                  >
                    <span slot="append">元/月</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="押金" prop="cashPledge">
                  <el-input
                    v-input.num
                    placeholder="请输入"
                    v-model="form.cashPledge"
                    style="width: 80%"
                    v-input.float="2"
                  >
                    <span slot="append">元</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" v-if="form.paymentType == 1">
              <el-col :span="12">
                <el-form-item label="租金" prop="monthPrice">
                  <el-input
                    placeholder="请输入"
                    v-model="form.monthPrice"
                    style="width: 80%"
                    v-input.float="2"
                  >
                    <span slot="append">元/月</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="押金" prop="cashPledge">
                  <el-input
                    v-input.num
                    placeholder="请输入"
                    v-model="form.cashPledge"
                    style="width: 80%"
                    v-input.float="2"
                  >
                    <span slot="append">元</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" v-if="form.areaCalculateState == 1">
              <el-col :span="12">
                <el-form-item label="面积单价" prop="areaUnitPrice">
                  <el-input
                    placeholder="请输入"
                    v-model="form.areaUnitPrice"
                    style="width: 80%"
                    v-input.float="2"
                    @input="calculateRent"
                  >
                    <span slot="append">元/m²</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="面积" prop="houseArea">
                  <el-input
                    v-input.num
                    placeholder="请输入"
                    v-model="form.houseArea"
                    style="width: 80%"
                    v-input.float="2"
                    @input="calculateRent"
                  >
                    <span slot="append">m²</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item prop="chargeItemDetailList">
              <div class="custom-formItem-lable" slot="label">
                <span>其他费用</span>
                <i
                  class="handle-icon el-icon-circle-plus"
                  @click="dialogChargeItemVisible = true"
                  v-if="!isDetail"
                ></i>
              </div>
              <el-row
                :gutter="10"
                v-for="(item, index) in chargeItemSelected"
                :key="index"
                style="margin-bottom: 10px"
              >
                <el-col :span="2">
                  <span>{{ item.chargeItemName }}</span>
                </el-col>
                <el-col :span="8">
                  <el-select
                    v-model="item.settlementType"
                    placeholder="请选择"
                    @change="changeSettlementType(item, index)"
                  >
                    <el-option
                      v-for="item in changeItemPayList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="10">
                  <el-input
                    placeholder="请输入"
                    v-model.number="item.totalPrice"
                    style="width: 80%"
                    v-input.float="2"
                    v-if="item.settlementType == 2"
                  >
                    <span slot="append">元</span>
                  </el-input>
                  <el-input
                    placeholder="请输入"
                    v-model.number="item.unitPrice"
                    style="width: 80%"
                    v-if="item.settlementType == 1"
                  >
                    <span slot="append">元</span>
                  </el-input>
                </el-col>
                <el-col :span="2">
                  <i
                    class="handle-icon el-icon-remove"
                    @click="removeChargeItem(index)"
                    v-if="!isDetail"
                  ></i>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="账单日期" prop="billingDate">
              <span>每月</span>
              <el-input
                placeholder="请输入"
                v-model="form.billingDate"
                style="width: 220px; margin: 0 5px"
                v-input.intp
              />
              <span>号生成账单</span>
            </el-form-item>
            <el-form-item label="收款日期" prop="collectionType">
              <el-row :gutter="10" style="margin-bottom: 22px">
                <el-col :span="24">
                  <el-radio v-model="form.collectionType" :label="1"
                    >提前</el-radio
                  >
                  <el-input
                    placeholder="请输入"
                    v-model="form.advanceCollectionDays"
                    style="width: 220px; margin: 0 5px"
                    :disabled="form.collectionType != 1"
                  />
                  <span>天收租</span>
                </el-col>
              </el-row>

              <el-row :gutter="10">
                <el-col :span="24">
                  <el-radio v-model="form.collectionType" :label="2"
                    >固定当月</el-radio
                  >
                  <el-input
                    placeholder="请输入"
                    v-model="form.collectionDays"
                    style="width: 220px; margin: 0 5px"
                    :disabled="form.collectionType != 2"
                  />
                  <span>号收租</span>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="滞纳金" prop="overdueFine">
              <span>每天</span>
              <el-input
                placeholder="请输入"
                v-model="form.overdueFine"
                v-input.float="2"
                style="width: 220px; margin: 0 5px"
              />
              <span>元（每逾期一天，按X元加收滞纳金）</span>
            </el-form-item>
          </div>
          <div class="section">
            <div class="label">
              <label>设备信息</label>
            </div>
            <el-form-item label="" prop="">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="水表读数" prop="waterMeterReading">
                    <el-input
                      placeholder="请输入"
                      v-model="form.waterMeterReading"
                      style="width: 80%"
                      v-input.float="2"
                    >
                      <span slot="append">吨</span>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="水费单价" prop="waterRateUnitPrice">
                    <el-input
                      v-input.num
                      placeholder="请输入"
                      v-model="form.waterRateUnitPrice"
                      style="width: 80%"
                      v-input.float="2"
                    >
                      <span slot="append">元/吨</span>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="电表读数" prop="ammeterValue">
                    <el-input
                      placeholder="请输入"
                      v-model="form.ammeterValue"
                      style="width: 80%"
                      v-input.float="2"
                    >
                      <span slot="append">度</span>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电费单价" prop="electricChargeUnitPrice">
                    <el-input
                      v-input.num
                      placeholder="请输入"
                      v-model="form.electricChargeUnitPrice"
                      style="width: 80%"
                      v-input.float="2"
                    >
                      <span slot="append">元/度</span>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm" v-if="!isDetail"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="收费项选择"
      :visible.sync="dialogChargeItemVisible"
      class="ChargeItemDialog"
      :before-close="closeChargeItemDialog"
      :destroy-on-close="true"
    >
      <el-form
        :model="chargeItemForm"
        ref="chargeItemForm"
        class="chargeItemForm"
      >
        <el-form-item prop="chargeItemArr">
          <el-checkbox-group v-model="chargeItemForm.chargeItemArr">
            <el-checkbox
              v-for="(item, index) in chargeItemList"
              :label="item.chargeItemId"
              name="type"
              :key="index"
              >{{ item.chargeItemName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChargeItemVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectChargeItem">保存</el-button>
      </div>
    </el-dialog>
    <SelectHouse v-model="dialogSelectHouseVisible" @success="selectHouseCb" />
  </div>
</template>

<script>
import { listPayType } from "@/api/house/unmount";
import {
  getChargeItemList,
  getContractTemplateAll,
  addContract,
  getContract,
} from "@/api/contract";

import SelectHouse from "./select-house.vue";
import { debounce } from "@/utils";
export default {
  name: "add",
  dicts: ["dict_payment_type", "dict_contract_type", "dict_tenant_type"],
  components: {
    SelectHouse,
  },
  props: {
    title: {
      default: "新建合同",
    },
    value: {
      default: false,
    },
    contractId: {
      default: undefined,
    },
    isDetail: {
      default: false,
    },
    success: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    var checkCollectionDays = (rule, value, callback) => {
      if (this.form.collectionType == 1 && !this.form.advanceCollectionDays) {
        callback(new Error("收款日不能为空"));
      }
      if (this.form.collectionType == 2 && !this.form.collectionDays) {
        callback(new Error("收款日不能为空"));
      }
      callback();
    };
    return {
      visible: false,
      currentTab: "0",
      dialogChargeItemVisible: false,
      dialogSelectHouseVisible: false,
      tabList: [
        {
          id: 0,
          label: "单个合同",
        },
        {
          id: 1,
          label: "批量录合同",
        },
      ],
      //已选择房屋信息
      selectHouseObj: undefined,
      //合同列表
      contractList: [],
      //合同类型
      contractTypeList: [
        {
          id: 1,
          label: "新签",
        },
        {
          id: 2,
          label: "续签",
        },
        {
          id: 3,
          label: "换签",
        },
      ],
      //付款方式
      paymentList: [
        { id: 1, label: "月租" },
        { id: 2, label: "日租" },
      ],
      //押付方式
      payTypeList: [],
      form: {},
      areaCalculateState: false,
      //收费项
      chargeItemForm: {
        chargeItemArr: [],
      },
      chargeItemList: [],
      changeItemPayList: [
        { id: 1, label: "周期性结算", value: "1" },
        { id: 2, label: "一次性结算", value: "2" },
      ],
      chargeItemSelected: [],
      rules: {
        houseId: [{ required: true, message: "请选择房间", trigger: "blur" }],
        templateId: [
          { required: true, message: "请选择合同模板", trigger: "blur" },
        ],
        tenantType: [
          { required: true, message: "请选择身份", trigger: "blur" },
        ],
        enterpriseName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        legalPerson: [
          { required: true, message: "请输入法人信息", trigger: "blur" },
        ],
        socialCreditNumber: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
        ],
        socialCreditNumberImg: [
          {
            required: true,
            message: "请上传统一社会信用代码图",
            trigger: "blur",
          },
        ],
        tenantMobile: [
          { required: true, message: "请输入电话", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        cardNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        contractType: [
          { required: true, message: "请选择合同类型", trigger: "blur" },
        ],
        leaseStartTime: [
          { required: true, message: "请输入租期开始时间", trigger: "blur" },
        ],
        leaseEndTime: [
          { required: true, message: "请输入租期结束时间", trigger: "blur" },
        ],
        paymentType: [
          { required: true, message: "请选择付款方式", trigger: "blur" },
        ],
        payTypeId: [
          { required: true, message: "请选择押付方式", trigger: "blur" },
        ],
        monthPrice: [
          { required: true, message: "请输入租金", trigger: "blur" },
        ],
        cashPledge: [
          { required: true, message: "请输入押金", trigger: "blur" },
        ],
        billingDate: [
          { required: true, message: "请输入号数", trigger: "blur" },
        ],
        collectionType: [
          { required: true, message: "请输入收款日期", trigger: "blur" },
          { validator: checkCollectionDays },
        ],
        collectionDays: [
          { required: true, message: "请输入号数", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    customHouseName: {
      get() {
        return this.form.houseId
          ? this.form.estateName +
              this.form.buildingName +
              "栋" +
              this.form.unitName +
              "单元" +
              this.form.roomNumber +
              "房"
          : "";
      },
      set() {},
    },
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init();
      }
      this.visible = newVal; // 监测value的变化，并赋值。
    },
    visible(val) {
      this.$emit("input", val); // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    },
    //监听收费项展示
    dialogChargeItemVisible(newVal, oldVal) {
      if (newVal) {
        getChargeItemList().then((response) => {
          console.log("response", response);
          this.chargeItemList = response.data;
        });
      }
    },
  },
  mounted() {
    this.visible = this.value;
  },
  methods: {
    init() {
      //重置
      this.reset();
      //获取押付方式
      this.getListPayType();
      //获取所有合同模板
      this.getContractTemplateAll();
      //获取
      this.getContract();
    },
    //重置表单
    reset() {
      this.areaCalculateState = false;
      this.form = {
        collectionType: "", //收款类型：1.提前；2.固定当月
        contractType: "", //合同类型：1.新签、2.续签、3.换签
        houseId: "", //房屋id
        provinceId: "", //省
        provinceName: "", //省份名称
        cityId: "", //市
        cityName: "", //市名称
        districtId: "", //区
        districtName: "", //区名称
        streetId: "", //所属街道
        streetName: "", //街道名称
        communityId: "", //所属社区
        communityName: "", //所属社区名称
        premisesAddress: null, //小区地址
        roomNumber: "", //房间号
        estateId: "", //楼盘id
        estateName: "", //楼盘名称
        buildingId: "", //楼栋id
        buildingName: "", //楼栋名称
        unitId: "", //单元id
        unitName: "", //单元名称
        floors: undefined, //层数
        areaUnitPrice: undefined, //房屋面积单价
        areaCalculateState: "", //是否按面积计算租金：0.否；1.是
        houseArea: undefined, //房屋面积
        cashPledge: undefined, //押金
        monthPrice: undefined, //月租价
        payTypeId: undefined, //押付方式id
        tenantType: undefined, //租客身份类型：1个人；2企业
        sex: undefined, //用户性别（0男 1女 2未知）
        tenantName: "", //租客姓名
        tenantMobile: "", //租客手机号码
        cardNumber: "", //身份证号码
        enterpriseName: "", //企业名称
        socialCreditNumber: "", //统一社会信用代码
        socialCreditNumberImg: "", //统一社会信用代码图
        legalPerson: "", //法人代表
        houseManagerId: "", //房屋管理员id
        houseManagerName: "", //房屋管理员名字
        houseManagerPhone: "", //房屋管理员电话
        billPushType: "", //账单推送对象：1.推送给委托人;2.推送给同住人;3.推送给委托人和同住人
        leaseStartTime: "", //租期开始时间
        leaseEndTime: "", //租期结束时间
        paymentType: "", //付款方式：1.月租;2.日租
        billingDate: "", //生成账单日期
        collectionDays: "", //收款日期
        advanceCollectionDays: "", //提前收款天数
        overdueFine: "", //滞纳金
        waterMeterReading: "", //水表读数
        waterRateUnitPrice: "", //水费单价
        ammeterValue: "", //电表读数
        electricChargeUnitPrice: "", //电费单价
        templateId: undefined, //合同模版id
        roomType: "", //户型
        houseFacilitiesItemList: [], //房屋收费项目明细
        chargeItemDetailList: [], //房屋收费项目明细
      };
    },
    //获取合同详情
    getContract() {
      if (!this.contractId) return;
      let id = this.contractId;
      getContract(id).then((response) => {
        this.form = response.data;

        this.chargeItemSelected = response.data.chargeItemDetailList;
        this.areaCalculateState =
          response.data.areaCalculateState == 1 ? true : false;
      });
    },
    changeTabs(data) {
      console.log("data", data);
      this.currentTab = data.id;
    },
    //获取所有合同模板
    getContractTemplateAll() {
      getContractTemplateAll().then((response) => {
        this.contractList = response.data;
      });
    },
    //获取押付方式
    getListPayType() {
      listPayType().then((response) => {
        this.payTypeList = response.data;
      });
    },
    //选择收费项
    selectChargeItem() {
      let list = this.chargeItemList.filter((item) =>
        this.chargeItemForm.chargeItemArr.includes(item.chargeItemId)
      );
      this.chargeItemSelected = list.map((item) => {
        return {
          chargeItemName: item.chargeItemName,
          settlementType: "1",
          unitPrice: undefined,
          totalPrice: undefined,
        };
      });
      this.form.chargeItemDetailList = this.chargeItemSelected;
      this.dialogChargeItemVisible = false;
    },
    //移除收费项
    removeChargeItem(index) {
      this.chargeItemSelected.splice(index, 1);
    },
    //关闭收费项弹窗
    closeChargeItemDialog() {},
    //面积计算租金状态改变
    changeAreaCalculateState(data) {
      console.log("data", data);
      let value = data ? "1" : "0";
      this.$set(this.form, "areaCalculateState", value);
    },
    //收费项结算类型修改
    changeSettlementType(item, index) {
      item.totalPrice = undefined;
      item.unitPrice = undefined;
    },
    //房间选择回调
    selectHouseCb(data) {
      this.selectHouseObj = data;
      let houseObj = {
        houseId: "", //房屋id
        provinceId: "", //省
        provinceName: "", //省份名称
        cityId: "", //市
        cityName: "", //市名称
        districtId: "", //区
        districtName: "", //区名称
        streetId: "", //所属街道
        streetName: "", //街道名称
        communityId: "", //所属社区
        communityName: "", //所属社区名称
        premisesAddress: null, //小区地址
        roomNumber: "", //房间号
        estateId: "", //楼盘id
        estateName: "", //楼盘名称
        buildingId: "", //楼栋id
        buildingName: "", //楼栋名称
        unitId: "", //单元id
        unitName: "", //单元名称
        floors: undefined, //层数
      };
      for (const key in houseObj) {
        houseObj[key] = data[key];
      }
      console.log("houseObj", houseObj);
      this.form = { ...this.form, ...houseObj };
    },
    //根据面积单价计算租金
    calculateRent: debounce(function () {
      if (!this.form.areaUnitPrice || !this.form.houseArea) return;
      let value = this.form.areaUnitPrice * this.form.houseArea;
      this.form.monthPrice = value;
    }, 100),
    //提交表单
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //其他费用检验有则判断
          try {
            this.form.chargeItemDetailList.forEach((item) => {
              if (!item.totalPrice && !item.unitPrice) {
                this.$message.error(`${item.chargeItemName}的费用不能为空`);
                throw "";
              }
            });
            console.log("this.form", this.form);
            // return
            //
            addContract(this.form)
              .then((response) => {
                if (response.code == 200) {
                  this.$emit("success");
                  this.$message.success(response.msg);
                  this.visible = false;
                } else {
                  this.$message.error(response.msg);
                }
              })
              .catch((err) => {
                this.$message.error(response.msg || "数据错误");
              });
          } catch (error) {
            return;
          }
        }
      });
    },
    //关闭
    close() {
      this.reset();
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.import-dialog {
  height: auto;
  max-height: 80vh;
  overflow-y: auto;
  .dialog-footer {
    text-align: center;
  }
}
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}
.form-box {
  .tabs {
    display: flex;
    .tabs-item {
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      position: relative;
      cursor: pointer;
      &::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2px;
        width: 0;
        height: 2px;
        opacity: 0;
        background: #0caaf0;
        transition: all 0.3s;
      }
      &.active {
        color: #0caaf0;
        &::before {
          opacity: 1;
          left: 0;
          width: 100%;
        }
        cursor: default;
      }
    }
  }
  .add-form {
    margin-top: 30px;
    .section {
      .label {
        display: flex;
        margin-bottom: 20px;
        font-size: 16px;
        align-items: center;
        color: #303133;
        label {
          display: block;
          width: 80px;
          &.dot::before {
            content: "*";
            color: #ff4949;
            margin-right: 4px;
          }
        }
        .icon {
          color: #02a7f0;
          font-size: 30px;
          margin-left: 30px;
          cursor: pointer;
        }
      }
      .tips {
        color: #aaaaaa;
      }
      .custom-formItem-lable {
        display: flex;
        align-items: center;
        .handle-icon {
          color: #02a7f0;
          font-size: 30px;
          margin-left: 30px;
          cursor: pointer;
        }
      }
      .handle-icon {
        color: #02a7f0;
        font-size: 30px;
        cursor: pointer;
      }
    }
  }
}
</style>